<template>
	<!-- 消息通知 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar :title="navtitle" showSlot>
			<view class="messageread" @click="allread">全部已读</view>
			<view class="messagedel" @click="allclear">清空</view>
		</navbar>
		<view class="type">
			<view class="type_text" :class="{'active':curType===1}" @click="changeType(1)">
				<view class="type_icon">
					<image src="/static/images/clock.png"></image>
				</view>
				<text>消息通知</text>
			</view>
			<view class="type_text" :class="{'active':curType===2}" @click="changeType(2)">
				<view class="type_icon">
					<image src="/static/images/horn.png"></image>
				</view>
				<text>系统公告</text>
			</view>
		</view>
		<noData v-if="messageList.length===0" title='暂无通知' />
		<view class="msg" v-for="(item,index) in messageList" :key="index" v-else>
			<view class="msg_top">
				<view class="msg_top_title" :class="{'unread':item.status==1}">
					<view class="msg_top_title_icon" v-if="item.status==1"></view>
					<text>{{item.title}}</text>
				</view>
				<view class="msg_top_more" @click="toDetail(item.id)">
					<text>查看详情</text>
					<image src="/static/images/more.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="msg_bot">
				<view class="msg_bot_content">
					<rich-text :nodes="item.content"></rich-text>
				</view>
				<view class="msg_bot_time">{{item.create_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navtitle:'消息通知',
				page:1,
				curType:1,//当前消息类型 0消息通知 1系统公告
				messageList:[]
			}
		},
		onShow() {
			this.page = 1;
			this.messageList = [];
			this.getMessagelist();
		},
		onReachBottom() {
			this.page++;
			this.getMessagelist();
		},
		methods: {
			//获取消息列表
			getMessagelist(){
				this.$api.messagelis({
					type:this.curType,
					offset:this.page
				}).then(res=>{
					this.messageList = this.messageList.concat(res);
				})
			},
			//全部已读
			allread(){
				this.$api.allread({type:this.curType}).then(res=>{
					this.page = 1;
					this.messageList = [];
					this.getMessagelist();
				})
			},
			//清空
			allclear(){
				this.$api.allclear({type:this.curType}).then(res=>{
					this.page = 1;
					this.messageList = [];
					this.getMessagelist();
				})
			},
			//切换消息类型
			changeType(e){
				this.curType = e;
				if(this.curType == 1){
					this.navtitle = '消息通知';
				}else{
					this.navtitle = '系统公告';
				}
				this.page = 1;
				this.messageList = [];
				this.getMessagelist();
			},
			//查看详情
			toDetail(id){
				uni.navigateTo({
					url:`./detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding: calc(var(--status-bar-height) + 200rpx) 0 30rpx;
}
.messageread{
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
	right: 120rpx;
	transform: translateY(5rpx);
}
.messagedel{
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
	right: 30rpx;
	transform: translateY(5rpx);
}
.type{
	position: fixed;
	left: 0;
	top: calc(var(--status-bar-height) + 100rpx);
	z-index: 999;
	width: 750rpx;
	height: 100rpx;
	background-color: $white;
	padding: 30rpx 60rpx 37rpx;
	box-sizing: border-box;
	@include between;
	
	.type_text{
		@include align-center;
		
		.type_icon{
			width: 58rpx;
			height: 58rpx;
			background: #FAC087;
			border-radius: 50%;
			@include center;
			
			image{
				width: 39rpx;
				height: 39rpx;
			}
		}
		text{
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			margin-left: 15rpx;
		}
	}
	.active{
		@include align-center;
		
		.type_icon{
			width: 58rpx;
			height: 58rpx;
			background: #FF670E;
			border-radius: 50%;
			@include center;
			
			image{
				width: 39rpx;
				height: 39rpx;
			}
		}
		text{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FF6408;
			margin-left: 15rpx;
		}
	}
}
.msg{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
	margin: 30rpx 30rpx 0;
	
	&_top{
		@include between;
		
		&_title{
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #666666;
			@include align-center;
			
			&_icon{
				width: 10rpx;
				height: 10rpx;
				background: #FF6409;
				border-radius: 50%;
				margin-right: 9rpx;
			}
		}
		.unread{
			color: #333333;
		}
		&_more{
			@include align-center;
			
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}
			image{
				width: 12rpx;
				height: 24rpx;
				margin-left: 16rpx;
			}
		}
	}
	&_bot{
		
		&_content{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			text-indent: 2em;
		}
		&_time{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			text-align: right;
			margin-top: 35rpx;
		}
	}
	.line{
		width: 630rpx;
		height: 1rpx;
		background: #E5E5E5;
		margin: 26rpx 0;
	}
}
</style>
